<template>
  <div class="leave-message">
    <div class="leave-message__avatar">
      <van-image round width="46px" height="46px" :src="fromAvatar" />
    </div>
    <div class="leave-message__content">
      <div class="leave-message__nickname">
        <span>{{ nickname }}</span>
<!--         <van-image
          v-show="admin"
          class="leave-message__tag-admin"
          width="48px"
          fit="contain"
          :src="require('./assets/tag-admin.png')"
        /> -->
      </div>
      <span class="leave-message__message">
        <!-- <span class="leave-message__top" v-show="top">[置顶]</span> -->
        <slot />
      </span>
      <span class="leave-message__datetime">{{ time | dateFormat }}</span>
<!--       <div class="leave-message__actions">
        <span class="leave-message__action">删除评论</span>
        <span v-show="!top" class="leave-message__action leave-message__action--top">置顶</span>
        <span v-show="top" class="leave-message__action">取消置顶</span>
      </div> -->
    </div>
    
  </div>
</template>

<script>

import { Image } from "vant";

import { defineComponent, ref } from "vue";

export default ({
  name: "LeaveMessage",
  props: {
    top: Boolean,
    admin: Boolean,
    nickname: String,
    message: String,
    datetime: String,
    fromAvatar: String,
    time: String
  },
  components: {
    
    [Image.name]: Image,
  },
  setup() {
    const active = ref(0);
    return { active };
  },
});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.leave-message__content{ width: 550px;}
.leave-message {
  margin-bottom: 36px;
  display: flex;

  &__content {
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
  }

  &__tag-admin {
    margin-left: 4px;
  }

  &__nickname {
    display: flex;
    align-items: center;
    color: #161f1c; margin-bottom:16px;
  }

  &__top {
    color: #cf4c5b;
    margin-right: 8px;
  }

  &__message {
    margin-top: 10px;
    display: inline-block;
    border: 1px solid #cf4c5b;
    padding: 8px 20px;
    color: #333333;
    background: $white;
    max-width: 80%;
  }

  &__datetime {
    margin-top: 10px;
    display: block;
    color: $gray-6;
    font-size: $font-size-sm;
  }

  &__actions {
    margin-top: 10px;
    display: block;
  }

  &__action {
    font-size: $font-size-sm;
    margin-right: 24px;
    color: $gray-6;

    &:last-child {
      margin-right: 0;
    }

    &--top {
      color: $orange-dark;
    }
  }
  .leave-message__message{ border-radius:5px;}
}
</style>
